/* 初始化样式
------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none !important;
}

:root {
	--vl-bg-main-color: #f5f5f5;
	--vl-text-main-color: #909399;
	--vl-border-color-light: #ebeef5;
	--vl-border-sidebar-color: #dbdcde;
	--vl-color-bars-hover: rgba(0, 0, 0, 0.08);
	--vl-color-drawer-hover: #f0f2f4;
	--vl-color-drawer-color: rgba(0, 0, 0, 0.7);
	--vl-color-dark-primary: #000000;
}
html,
body,
#app {
	margin: 0;
	padding: 0;
	width: 100%;	
	height: 100%;
	font-weight: 400;
	font-size: 14px;
	overflow: hidden;
	position: relative;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}

/* 主布局样式
------------------------------- */
.layout-container{
	width: 100%;
	height: 100%;
	//基础布局padding
	.layout-pd {
		padding: 15px !important;
	}
	//基础布局flex模式
	.layout-flex {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.layout-sidebar{
		background: var(--vl-menu-bg-color);
		height: inherit;
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		overflow-x: hidden !important;
		border: 1px solid var(--vl-border-sidebar-color);
	}
	.layout-header {
		padding: 0 !important;
		height: auto !important;
		background-color: var(--el-color-white);
	}
	.layout-header-topbars{
		height: 50px;
		border-bottom:  1px solid var(--vl-border-color-light);
		display: flex;
		align-items: center;
	}

	.layout-main{
		padding: 0 !important;
		overflow: hidden;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: var(--vl-bg-main-color);
		.layout-main-scroll {
			@extend .layout-flex;
			.layout-parent {
				@extend .layout-flex;
				position: relative;
			}
		}
	}



	// 用于界面高度自适应
	.layout-padding {
		@extend .layout-pd;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		overflow: hidden;
		@extend .layout-flex;
		&-auto {
			height: inherit;
			@extend .layout-flex;
		}
		&-view {
			background: var(--el-color-white);
			width: 100%;
			height: 100%;
			border-radius: 4px;
			border: 1px solid var(--vl-border-color-light);
			overflow: hidden;
		}
	}

	.el-scrollbar {
		width: 100%;
	}

	.layout-topbar-item-icon{
		height: 50px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		&:hover {
			background: var(--vl-border-sidebar-color);
			cursor: pointer;
			i {
				display: inline-block;
				animation: logoAnimation 0.3s ease-in-out;
			}
		}
	}
}


// pc端左侧导航样式
.layout-aside-pc-220 {
	width: 220px !important;
	transition: width 0.3s ease;
}
.layout-aside-pc-64 {
	width: 64px !important;
	transition: width 0.3s ease;
}



/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
	.font#{$i} {
		font-size: #{$i}px !important;
	}
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
	.mt#{$i} {
		margin-top: #{$i}px !important;
	}
	.mr#{$i} {
		margin-right: #{$i}px !important;
	}
	.mb#{$i} {
		margin-bottom: #{$i}px !important;
	}
	.ml#{$i} {
		margin-left: #{$i}px !important;
	}
	.pt#{$i} {
		padding-top: #{$i}px !important;
	}
	.pr#{$i} {
		padding-right: #{$i}px !important;
	}
	.pb#{$i} {
		padding-bottom: #{$i}px !important;
	}
	.pl#{$i} {
		padding-left: #{$i}px !important;
	}
}


/* 宽高 100%
------------------------------- */
.w100 {
	width: 100% !important;
}
.h100 {
	height: 100% !important;
}
.vh100 {
	height: 100vh !important;
}
.max100vh {
	max-height: 100vh !important;
}
.min100vh {
	min-height: 100vh !important;
}
